<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{admin/adminCommons :: add_blog_top_head(~{::title})}">
    <title>后台博客管理</title>
</head>
<body>
<!--导航栏-->
<nav th:replace="~{admin/adminCommons :: top_nav_bar(1)}"></nav><!--中间内容-->
<!--二级导航-->
<div class="ui attached pointing menu">
    <div class="ui container">
        <a href="#" th:href="@{/admin/addBlog}" class="active teal item">发布文章</a>
        <a href="#" th:href="@{/admin/blogs}" class="item">文章列表</a>
    </div>
</div>
<!--中间内容-->
<div class="cus-padding-top-bottom-massive">
    <div class="ui container cus-container-width">
        <form id="blog_form" th:action="@{/admin/blogs/addBlog}" th:object="${blog}" method="post" class="ui form">
            <input type="hidden" name="published" th:value="*{published}">
            <input type="hidden" name="id" th:value="*{id}">
            <!--            标题和类型-->
            <div class="required field">
                <div class="ui left labeled input">
                    <div id="flag-dropdown" class="ui selection compact teal basic dropdown label">
                        <input type="hidden" name="flag" value="原创" th:value="*{flag}">
                        <i class="dropdown icon"></i>
                        <div class="text">原创</div>
                        <div class="menu">
                            <div class="item" th:value="原创" data-value="原创">原创</div>
                            <div class="item" th:value="转载" data-value="转载">转载</div>
                            <div class="item" th:value="其它" data-value="其它">其它</div>
                        </div>
                    </div>
                    <input type="text" name="title" id="blogTitle" th:value="*{title}" placeholder="标题">
                </div>
            </div>
            <!--            文章内容区域-->
            <div class="required field" style="position: relative !important;z-index: 5 !important;">
                <div id="md-editor">
                    <textarea placeholder="内容" style="display: none" th:text="*{content}" name="content"></textarea>
                </div>
            </div>
            <!--            分类和标签-->
            <div class="two fields">
                <div class="required field">
                    <div class="ui left labeled action input">
                        <label class="ui compact teal basic label">分类</label>
                        <div id="type-dropdown" class="ui fluid selection dropdown">
                            <input type="hidden" name="typeId" th:value="*{typeId}">
                            <i class="dropdown icon"></i>
                            <div class="default text">分类</div>
                            <div class="menu">
                                <div th:each="type:${types}" th:text="${type.name}" th:data-value="${type.id}"
                                     class="item" data-value="0">more
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <div class="ui left labeled action input">
                        <label class="ui compact teal basic label">标签</label>
                        <div id="tags-dropdown" class="ui fluid multiple search selection dropdown">
                            <input type="hidden" name="tags" th:value="*{tags}">
                            <i class="dropdown icon"></i>
                            <div class="default text">标签</div>
                            <div class="menu">
                                <div th:each="tag:${tags}" th:text="${tag.name}" th:data-value="${tag.id}"
                                     class="item" data-value="0">more
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--            封面图片-->
            <div class="required field">
                <div class="ui left labeled action input">
                    <label for="cover-pic" class="ui teal basic label">封面图片</label>
                    <input type="text" id="cover-pic" th:value="*{firstPicture}" name="firstPicture"
                           placeholder="封面地址">
                    <button class="ui teal button">上传</button>
                </div>
            </div>
            <!--            描述-->
            <div class="required field">
                <div>
                    <textarea placeholder="一段简短的描述这篇文章。。。" th:text="*{description}"
                              name="description">
                    </textarea>
                </div>
            </div>
            <!--            推荐等选择框-->
            <div class="inline fields">
                <div class=" field">
                    <div class="ui toggle checkbox">
                        <input type="checkbox" name="recommend" th:checked="*{recommend}" id="recommend"
                               class="hidden">
                        <label for="recommend">首页推荐</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui toggle checkbox">
                        <input type="checkbox" name="shareStatement" th:checked="*{shareStatement}"
                               id="shareStatement" class="hidden">
                        <label for="shareStatement">允许转载</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui toggle checkbox">
                        <input type="checkbox" name="appreciation" th:checked="*{appreciation}"
                               id="appreciation" class="hidden">
                        <label for="appreciation">开启赞赏</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui toggle checkbox">
                        <input type="checkbox" name="commentable" th:checked="*{commentable}"
                               id="commentable"
                               class="hidden">
                        <label for="commentable">允许评论</label>
                    </div>
                </div>
            </div>

            <!--            错误提示信息框-->
            <div class="ui error message"></div>

            <!--            返回、保存、提交三个按钮-->
            <div class="ui right aligned container">
                <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
                <button type="button" id="save_btn" class="ui black secondary button">保存</button>
                <button type="button" id="publish_btn" class="ui teal button">提交</button>
            </div>
        </form>
    </div>
</div>
<!--底部内容-->
<footer th:replace="~{admin/adminCommons :: add_blog_footer_nav_bar}"></footer>
<script type="text/javascript">
    // 鼠标点击分类弹出下拉菜单
    $('#type-dropdown').dropdown();
    $('#flag-dropdown').dropdown('set value', "原创");
    $('#tags-dropdown').dropdown();
    $('.ui.checkbox').checkbox();

    $("#save_btn").click(() => {
        $("[name='published']").val(false);
        $("#blog_form").submit();
    })
    $("#publish_btn").click(() => {
        $("[name='published']").val(true);
        $("#blog_form").submit();
    })
    $('.ui.checkbox')
        .checkbox()
    ;

    // 表单校验
    $('.ui.form').form({
        fields: {
            blogTitle: {
                identifier: 'blogTitle',
                rules: [{
                    type: 'empty',
                    prompt: '请输入博客的标题'
                }]
            },
            content: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '请输入博客的内容'
                }]
            },
            typeId: {
                identifier: 'typeId',
                rules: [{
                    type: 'empty',
                    prompt: '请输入博客的分类'
                }]
            },
            firstPicture: {
                identifier: 'firstPicture',
                rules: [{
                    type: 'empty',
                    prompt: '请输入博客的封面地址'
                }]
            }
        }
    })

    // 开启mdeditor
    var Editor;
    $(function () {
        Editor = editormd("md-editor", {
            width: "100%",
            height: 640,
            emoji: true,
            syncScrolling: "single",
            path: "/lib/md-editor/lib/"
        })
    })
</script>
</body>
</html>